<template>
    <div class="userLogin">
        <div class="login_box">
            <div class="user_title">用户登录</div>

            <el-input
                    v-model="username"
                    class="w-50 m-2"
                    placeholder="请输入用户名"
            >
                <template #prefix>
                    <el-icon><user /></el-icon>
                </template>
            </el-input>

            <el-input
                    v-model="password"
                    class="w-50 m-2"
                    placeholder="请输入密码"
                    type="password"
            >
                <template #prefix>
                    <el-icon><unlock /></el-icon>
                </template>
            </el-input>

            <el-button type="primary" @click="Login">登录</el-button>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import { useStore } from 'vuex'
    import { useRoute, useRouter } from "vue-router";
    export default defineComponent({
        name: 'userLogin',
        setup() {
            const router = useRouter()

            const username = ref("")
            const password = ref("")
            const store = useStore()
            function Login() {
                store.dispatch("Login",{username:username.value,password:password.value}).then(res=>{
                    router.push({path:'/home'})
                })
            }

            return {username,password,Login};
        },
    });
</script>
<style lang="scss">
    .userLogin{
        width: 100vw;
        height: 100vh;
        background-image: url("../assets/login_bg.jpg");
        background-size:100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .login_box{
            width: 519px;
            height: 493px;
            background-color: #ffffff;
            border-radius: 10px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 999;
            &:after{
                width: 519px;
                height: 493px;
                background-color: #ffffff;
                border-radius: 10px;
                opacity: 0.21;
                display: block;
                content: '';
                position: absolute;
                top:10px;
                left: 10px;
                z-index: 0;
            }
            .user_title{
                /*width: 107px;*/
                /*height: 26px;*/
                font-family: MicrosoftYaHei;
                font-size: 26px;
                font-weight: normal;
                margin-bottom: 14%;
                font-stretch: normal;
                letter-spacing: 2px;
                color: #377ef7;
            }
            .el-input{
                width: 404px;
                border: none;
                border-bottom:2px solid #4190f6;
                margin-bottom: 10%;
                position: relative;
                z-index: 100;
            }
            .el-input__inner{
                border: none;
                box-shadow: none;
            }
            .el-button{
                position: relative;
                z-index: 99;
                width: 401px;
            }
            .el-input__prefix-inner{
                align-items: center;
            }
        }
    }
</style>
